<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/shopcontract'}">销售合同</el-breadcrumb-item>
    <el-breadcrumb-item >销售退货</el-breadcrumb-item>

  </el-breadcrumb>
  <el-card >

  <el-row :gutter="20">
      <el-col :span="4"><el-input placeholder="请输入查询号码" v-model="queryinfo.search"  clearable @clear="getUserList">
        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
  </el-input></el-col>
<template>
  <el-select v-model="username"  clearable placeholder="客户名称" style="width: 120px; margin-right: 6px;">
    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
</template>
  <template>
  <el-select v-model="inhomestate"  clearable placeholder="入库状态" style="width: 120px;  margin-right: 6px;">
    <el-option
      v-for="item in inhome"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
</template>
  </el-row>

  <div class="block" style="margin-top: 10px;">
  <el-date-picker
    v-model="data"
    type="daterange"
    range-separator="至"
    start-placeholder="退货开始日期"
    end-placeholder="退货结束日期"
    style="margin-right: 10px;">
  </el-date-picker>
  <el-button type="primary" icon="el-icon-refresh" @click="reset"></el-button>

  <el-button type="warning" @click="add">新建</el-button>
  <el-button type="danger">删除指定</el-button>
</div>
  <template>
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
          type="index"
          label="#"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
         prop="id"
label="序号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="returnsid"
          label="退货单号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shippedid"
          label="发货单号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="contract"
          label="合同编号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="returnsdate"
          label="退货日期"
          width="120%"
          align="center">
        </el-table-column>
        <el-table-column
          prop="returnsmoney"
          label="退货金额"
          width="120%"
          align="center">
        </el-table-column>

        <el-table-column
        prop="inhomestate"
          label="入库状态"
          width="120%"
          align="center"
          >
          <template>
        </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="130%"
          align="center">
          <template v-slot="scope">

              <el-tooltip  effect="dark" content="修改" placement="top">
                  <el-button type="warning" icon="el-icon-edit-outline" size="12px" circle @click="Modify"></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="删除" placement="top">
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
      </el-tooltip>

          </template>
        </el-table-column>

      </el-table>
    </template>
    <div class="block">

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[1, 2, 3, 5,8,10]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px;">
      </el-pagination>

    </div>
  </el-card>
  <el-dialog
  title="新建销售退货"
  :visible.sync="addmodify"
  width="60%"

 >
  <span class="opinion">
    <el-form :inline="true" >

  <el-form-item >
    <template>
  <el-select v-model="value" placeholder="送货方式" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<el-input placeholder="发货单号" style="width: 200px;" v-model="shippedid"></el-input>
        <el-button type="warning" style="margin-left: 10px;" @click="Shipped">选择</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="reset"></el-button>
        <div class="block">
    <el-date-picker
      v-model="outshop"
      type="date"
      placeholder="退货日期" style="margin-top: 10px;   margin-right: 10px;">
    </el-date-picker>
    <el-input placeholder="退货原因" style="width: 200px;  margin-right: 10px;"></el-input>
    <el-input placeholder="备注" style="width: 200px;"></el-input>
<div>
  <el-divider content-position="left">添加数据</el-divider>
  <el-input placeholder="退货单号" v-model="addFormref.returnsid" style="width: 200px; margin-right:10px; margin-top:10px;"></el-input>
    <el-input placeholder="发货单号" v-model="addFormref.shippedid" style="width: 200px; margin-right:10px;"></el-input>
    <el-input placeholder="合同编号" v-model="addFormref.contractid" style="width: 200px; margin-right:10px;"></el-input>
    <el-input placeholder="客户名称" v-model="addFormref.name" style="width: 200px; margin-right:10px;"></el-input>
    <el-input placeholder="退货金额" v-model="addFormref.returnsmoney" style="width: 200px; margin-right:10px; margin-top:10px;"></el-input>
  </div>
</div>
  </el-form-item>

    </el-form>
    <span>
      <template >
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
          type="index"
          label="#"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
         prop="id"
label="序号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="material"
          label="物料"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="ordersum"
          label="订货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shippedsum"
          label="发货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="returnssum"
          label="退货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="120%"
          align="center"
          >
        </el-table-column>

      </el-table>

    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>  </template>
    </span>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addmodify = false">取 消</el-button>
    <el-button type="primary" @click="Addreturns">提交</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改销售退货"
  :visible.sync="modify"
  width="50%"

 >
  <span class="opinion">
    <el-form :inline="true" >

  <el-form-item >
    <template>
  <el-select v-model="value" placeholder="送货方式" style="width: 120px; margin-right: 10px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<el-input placeholder="发货单号" style="width: 200px;" v-model="shippedid"></el-input>
        <el-button type="warning" style="margin-left: 10px;" @click="Shipped">选择</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="reset"></el-button>
        <div class="block">
    <el-date-picker
      v-model="outshop"
      type="date"
      placeholder="退货日期" style="margin-top: 10px;   margin-right: 10px;">
    </el-date-picker>
    <el-input placeholder="退货原因" style="width: 200px;  margin-right: 10px;"></el-input>
    <el-input placeholder="备注" style="width: 200px;"></el-input>

  </div>
  </el-form-item>

    </el-form>
    <span>
      <template >
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
          type="index"
          label="#"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
         prop="id"
label="序号"
width="80%"
align="center"
          >
        </el-table-column>
        <el-table-column
          prop="material"
          label="物料"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="ordersum"
          label="订货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shippedsum"
          label="发货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="returnssum"
          label="退货数量"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="120%"
          align="center"
          >
        </el-table-column>

      </el-table>

    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>  </template>
    </span>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="modify = false">取 消</el-button>
    <el-button type="primary" @click="Putreturns">保存</el-button>
  </span>
</el-dialog>
<el-dialog
  title="选择发货单"
  :visible.sync="shipped"
  width="60%"
>
  <span>
    <el-card>
        <el-row>
        <el-col :span="5"><el-input placeholder="请输入查询号码" v-model="search"  clearable @clear="getUserList" >

</el-input></el-col>
<el-select v-model="username"  clearable placeholder="客户名称" style="width: 120px; margin-right: 10px; margin-left:10px;">

    <el-option
      v-for="item in listtest"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
  <el-date-picker
    v-model="data1"
    type="daterange"
    range-separator="至"
    start-placeholder="交货开始日期"
    end-placeholder="交货结束日期"
    style="margin-right:10px;"
    >
  </el-date-picker>
  <el-button type="info" icon="el-icon-search" ></el-button>
    <el-button type="primary" icon="el-icon-refresh" @click="reset"></el-button>
</el-row>

    <template>
      <el-table
      :data="currentPageData"
        border
        stripe>
        <el-table-column
          type="index"
        label="编号"
        width="80%"
        align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shippedid"
          label="发货单号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="contract"
          label="合同编号"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="shippedtype"
          label="送货方式"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="delivery"
          label="交货日期"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="receiveaddress"
          label="收货地址"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="phonename"
          label="联系人"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="phonetype"
          label="联系电话"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="inhomestate"
          label="出库状态"
          width="120%"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="130%"
          align="center">
          <template v-slot="scope">

              <el-tooltip  effect="dark" content="选择" placement="top" >
                  <el-button type="primary" icon="el-icon-thumb" size="12px" circle @click="choose(scope.row.id)"></el-button>
      </el-tooltip>

          </template>
        </el-table-column>

      </el-table>
    </template>
    <div class="block">

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryinfo.pagenum"
  :page-sizes="[1, 2, 3, 5,8,10]"
  :page-size="queryinfo.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  style="margin-top: 20px;">
</el-pagination>

</div>
</el-card>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="shipped = false">取 消</el-button>
    <el-button type="primary" @click="shipped = false">确 定</el-button>
  </span>
</el-dialog>
    </div>
  </template>
<script>
import axios from 'axios'
export default {
  name: 'PurchasePlan',
  data () {
    return {
      addmodify: false,
      outshop: '',
      data: '',
      data1: '',
      listtest: [],
      userinfo: [],
      search: '',
      total: 0,
      addDialogVisible: false,
      queryinfo: {
        search: '',
        pagenum: 1,
        pageSize: 5
      },
      addForm: {
      },
      addFormref: {
        id: '',
        document: '1202020',
        type: '退货入库',
        supplier: 'Vivo',
        contract: '4565656',
        contractid: '',
        state: '计划申请',
        contracttype: '采购合同',
        applyid: 110,
        applytype: '补货申请',
        planid: 132456,
        replenish: 100546,
        applyname: '李世民',
        applydata: '2023-10-15',
        applystate: '待审核',
        auditor: '陆飞',
        auditordata: '2024-12-23',
        auditorstate: '通过',
        shopid: 123456,
        name: '',
        phonename: '李白',
        phonetype: 12306,
        money: 1000000,
        delivery: '2025-12-31',
        returnsid: '',
        shippedid: '',
        returnsdate: '2023-1-25',
        returnsmoney: '',
        inhomestate: '已入库',
        shippedtype: '物流',
        receiveaddress: '安徽省合肥市',
        material: '不锈钢',
        model: 'H6-8Jk',
        specification: '12mm',
        unit: '2',
        price: '12',
        ordersum: '20000',
        shippedsum: '10',
        returnssum: '10',
        remark: '卖不起别卖',
        shop: '碳水化合物',
        shopmoney: 240000
      },
      addrules: {
      },
      modify: false,
      shipped: false,
      options: [{
        value: '选项1',
        label: '快递'
      }, {
        value: '选项2',
        label: '物流'
      }],
      inhome: [{
        value: '选项1',
        label: '未入库'
      }, {
        value: '选项2',
        label: '已入库'
      },
      {
        value: '选项3',
        label: '入库中'
      }],
      value: '',
      username: '',
      inhomestate: '',
      shippedid: ''
    }
  },
  methods: {
    async Addreturns () {
      const res = await axios.get('/cart')
      const user = res.data
      const add = this.addFormref
      res.data.user.push(add)
      await axios.post('/cart', user.user)
      const maxId = Math.max(...user.user.map(item => item.id))

      // 新的ID为最大ID加1
      const newId = maxId + 1
      add.id = newId
      await axios.put('/cart', { user: user.user, total: res.data.total + 1 })
      this.$message.success('添加成功！')
      this.addmodify = false
      this.getUserList()
    },
    Putreturns () {
      this.modify = false
      this.$message.success('修改成功！')
    },
    async choose (id) {
      const res = await axios.get('/cart')
      for (const item of res.data.user) {
        if (item.id === id) {
          this.shippedid = item.shippedid
          this.value = item.shippedtype
          this.outshop = item.returnsdate
          this.returnsid = item.returnsid
          this.contractid = item.contractid
        }
      }
      console.log(this.value)
      this.shipped = false

      console.log(id)
    },
    reset () {
      this.username = ''
      this.queryinfo.search = ''
      this.inhomestate = ''
      this.data = ''
      this.outshop = ''
      this.data1 = ''
      this.value = ''
      this.search = ''
      this.shippedid = ''
    },
    // 获取列表V
    async getUserList () {
      const res = await axios.get('/cart', {
        params:
          this.queryinfo

      })
      this.listtest = res.data.user
      this.total = res.data.total
    },

    // 获取页码V
    async getPage () {
      const res = await axios.get('/cart')
      this.queryinfo.pagenum = res.data.pagenum
      this.queryinfo.pageSize = res.data.pageSize
      this.getUserList()
    },

    handleSizeChange (newsize) {
      this.queryinfo.pageSize = newsize
    },
    handleCurrentChange (newnum) {
      this.queryinfo.pagenum = newnum
    },
    // 更新用户状态V
    addchear () {
      this.$refs.addFormref.resetFields()
    },

    // 删除数据V
    async del (index) {
      const text = await this.$confirm('是否确认删除删除该数据项', '删除用户！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (text !== 'confirm') {
        return this.$message.warning('已取消删除！')
      }

      let res = await axios.get('/cart')
      const user = res.data.user
      const deleteIndex = user.findIndex((item) => item.id === index)
      user.splice(deleteIndex, 1)
      res = await axios.put('/cart', { user, total: res.data.total - 1 })
      this.getUserList()

      console.log(res)
    },
    Modify () {
      this.modify = true
    },
    Shipped () {
      this.shipped = true
    },
    add () {
      this.addmodify = true
    }
  },
  components: {},
  computed: {
    currentPageData () {
      const start = (this.queryinfo.pagenum - 1) * this.queryinfo.pageSize
      const end = start + this.queryinfo.pageSize
      return this.listtest.slice(start, end)
    }
  },
  mounted () {
    this.getUserList()
  }
}
</script>
  <style lang="less" scoped>
  .underline{
    position: relative;
    right: 142px;
  }
.data{
  margin-top: 12px;
}
.opininp{
  box-sizing: border-box;
  position: relative;
 right: 90px;
  width: 500px;
}
.opinbtu{
  position: relative;
  left: 50px;
 padding-right: 20px;
 top: 20px;
}
.classify{
  position: relative;
  right: 10px;
  width: 93px;
}
  </style>
